<!-- 199010128 冉炜业 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/wrok01.css">
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <!-- 一级导航 -->
        <ul class="nav" >
            <li v-for="nav in navs" @mouseover="nav.show = !nav.show" @mouseout="nav.show = !nav.show">
                <a :href="nav.url">
                    {{nav.name}}
                    <span>{{nav.en}}</span>
                </a>
                <!-- 二级导航 -->
                <ul class="subnav" v-show="nav.show">
                    <li v-for="subnav in nav.subnavs">
                        <a :href="subnav.url">{{subnav.name}}</a>
                    </li>
                </ul>
            </li>
        </ul>
        <div style="width: 100%;height: 200px;background: #222222;"></div>
    </div>
</body>

<script>
    //导航列表
    const navList = {
        // 一级
        navs: [
            {
                name: '首页', url: '#', show: false, en: 'Home', subnavs: [        //二级
                ]
            },
            {
                name: '关于红岩', url: '#', show: false, en: 'HongYan', subnavs: [
                    { name: '红岩文化', url: '#' },
                    { name: '博物馆机构', url: '#' },
                    { name: '历史沿革', url: '#' },
                ]
            },
            {
                name: '公告动态', url: '#', show: false, en: 'Dynamics', subnavs: [
                    { name: '文博信息', url: '#' },
                    { name: '政务平台', url: '#' },
                    { name: '公告', url: '#' },
                    { name: '专题报道', url: '#' },
                ]
            },
            {
                name: '馆藏精品', url: '#', show: false, en: 'Exhibition', subnavs: [
                    { name: '一级文物', url: '#' },
                    { name: '二级文物', url: '#' },
                    { name: '三级文物', url: '#' },
                ]
            },
            {
                name: '陈列展览', url: '#', show: false, en: 'Research', subnavs: [
                    { name: '虚拟展览', url: '#' },
                    { name: '基本陈列', url: '#' },
                    { name: '复原陈列', url: '#' },
                    { name: '临时展览', url: '#' },
                    { name: '展览文化', url: '#' },
                ]
            },
            {
                name: '研究开发', url: '#', show: false, en: 'Education', subnavs: [
                    { name: '历史研究', url: '#' },
                    { name: '艺术创作', url: '#' },
                    { name: '影音在线', url: '#' },
                    { name: '文创产品', url: '#' },
                ]
            },
            {
                name: '公共教育', url: '#', show: false, en: 'Service', subnavs: [
                    { name: '党性教育', url: '#' },
                    { name: '爱国主义教育', url: '#' },
                    { name: '研学实践教育', url: '#' },
                    { name: '科普教育', url: '#' },
                ]
            },
            {
                name: '参观服务', url: '#', show: false, en: 'Reservation', subnavs: [
                    { name: '景点介绍', url: '#' },
                    { name: '服务内容', url: '#' },
                    { name: '网上预约', url: '#' },
                    { name: '志愿服务', url: '#' },
                ]
            },
            {
                name: '网上预约', url: '#', show: false, en: 'Reservation', subnavs: [
                ]
            },
        ]
    };
    const vm = Vue.createApp({
        data() {
            return navList;
        },
    }).mount('#app');
</script>

</html>